import React from 'react'
import {View, Text, SectionList, SafeAreaView, TouchableOpacity} from 'react-native'
import { connect } from 'react-redux';
import makeActions from "./src/stores/action";
import musicServer from './src/http/musicServer.js'
import Video  from 'react-native-video';
import PlayList, {PlayListConf} from './src/views/SongList.js'
import SongItem from './src/views/SongItem.js'
import MusicControl, {MusicControlConf} from './src/views/MusicControl.js'
import Icon from "react-native-vector-icons/FontAwesome";

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.playListConf = new PlayListConf(this, 'playListConf')
    this.musicControlConf = new MusicControlConf(this, 'musicControlConf')
    this.state = {
      playListConf: this.playListConf,
      recommendResource: [],
      recommendSongs: [],
      userPlaylist: [],
      userInfo: {},
      songList: {},
      paused: false,
      musicControlConf: this.musicControlConf
    }

    musicServer.loginCellphone({phone: 16621079485, password: `a13789`})(res=> {
      this.setState({userInfo: res});
      this.getInitData();
    });
  }
  getInitData(){
    const {userInfo} = this.state;
    const {id} = userInfo.account;
    musicServer.recommendResource()(res => {
      this.setState({recommendResource: res.recommend})
    });

    musicServer.recommendSongs()(res => {
      this.setState({recommendSongs: res.recommend})

    });
    musicServer.userPlaylist({uid: id})(res => {
      this.setState({userPlaylist: res.playlist})
    });
    musicServer.likelist()(res => {
      this.musicControlConf.setLikeList(res.ids)
    });
  }
  playSong(song, section){
    if (section.id) musicServer.playlistDetail({id: song.id})(res =>
      this.playListConf.showPop(res)
    )
    else this.musicControlConf.playSong(song)
  }
  render() {
    const {curUrl, musicControlConf} = this.state;
    return (
      <SafeAreaView style={{height: '100%'}}>
        <MusicControl {...this.state.musicControlConf} conf={this.musicControlConf}/>
        <View style={styles.wrap}>
          <SectionList
            style={styles.lists}
            renderItem={({ item, index, section }) =>
              <SongItem
                key={index} {...{song: item, section}}
                curSong={musicControlConf.curSong}
                likeList={this.state.musicControlConf.likeList}
                likeSong={song => this.musicControlConf.likeSong(song)}
                playSong={(song, section) => this.playSong(song, section)}/>
            }
            renderSectionHeader={({ section: { title, id, data } }) => (
              <View style={styles.titleWrap}>
                <Text style={styles.titleWrapText}>{title}</Text>
                {id ? undefined :
                  <TouchableOpacity onPress={() => this.musicControlConf.setPlayList(data)}>
                    <Icon style={styles.rightIcon} name={'caret-right'} size={24} color={'#fff'} />
                  </TouchableOpacity>
                }
              </View>
            )}
            sections={[
              { title: "每日推荐歌曲", id: 0, data: this.state.recommendSongs },
              { title: "每日推荐歌单", id: 1, data: this.state.recommendResource },
              { title: "我的歌单", id: 1, data: this.state.userPlaylist }
            ]}
            keyExtractor={(item, index) => item.name + index}
          />
          <PlayList
            {...this.state.playListConf}
            conf={this.state.playListConf}
            playSong={song => this.playSong(song, {id: false})}
            curSong={musicControlConf.curSong}
            control={this.musicControlConf}
            likeSong={song => this.musicControlConf.likeSong(song)}
            likeList={this.state.musicControlConf.likeList}
          />
          {musicControlConf.curUrl && <Video
            ref={(ref) => (this.player = ref)}
            style={styles.backgroundVideo}
            source={{uri: musicControlConf.curUrl}}
            controls={true}
            audioOnly={true}
            paused={musicControlConf.paused}
            playInBackground={true}
            onEnd={() => {this.musicControlConf.nextSong()}}
            onLoad={info => {
              // this.player.seek(0)
            }}
            onBuffer={
              info => {
                console.log(info)
              }
            }
            onProgress={info => {
              // console.log(info)
            }}
          />}
        </View>
      </SafeAreaView>
    );
  }
}

const styles = {

  wrap: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    flex: 1,
    backgroundColor: '#f4f4f4',
    position: 'relative',
  },
  lists: {
    flex: 1,
    width: '100%'
  },
  titleWrap: {
    width: '100%',
    textAlign: 'left',
    padding: 15,
    backgroundColor: '#fa541c',
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center'
  },
  titleWrapText: {
    fontWeight: "bold",
    color: '#fff',
    flex: 1
  },
  backgroundVideo: {
    display: 'none',
    height: 60,
    bottom: -60,
    left: 0,
    width: '100%',
    position: 'absolute',
    backgroundColor: 'transparent',
    opacity: .3
  },
  rightIcon: {
    // position: 'absolute',
    // top: '50%',
    // right: 10,
    // transform: [{translate: [0, '-50%']}]
  }
}

const mapStateToProps = state => ({...state.commonReducer});
const mapDispatchToProps = dispatch => ({...makeActions(dispatch)});
export default connect(mapStateToProps, mapDispatchToProps)(Index);
